<!--
 * @Author: fangshengchu
 * @Date: 2024-05-23 14:41:53
 * @LastEditTime: 2024-06-02 10:19:54
 * @LastEditors: fangshengchu
 * @Description: 
 * @FilePath: \szhk-fe\src\common\views\baseComponent\query-page.vue
-->
<template>
  <div class="page-con">
    <query-page
      v-model:selectedKeys="selectedKeys"
      title="我是标题"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      :total="100"
      :has-line="false"
      row-selection-type="radio"
      @selection-change="selectionChange"
      @query-data="getData"
    >
      <template #container-side>
        <div>container-side 自定义内容</div>
      </template>
      <template #table-header>
        <div class="table-header">table-header 自定义内容</div>
      </template>
      <template #table-side>
        <div class="table-side">table-side 自定义内容</div>
      </template>
      <template #email="{ record, rowIndex }">
        <div class="table-side">
          table里的slot+ {{ record.email }} + {{ rowIndex }}
        </div>
      </template>
      <template #operate="{ record, rowIndex }">
        <a-button type="text" @click="showConsole(record, rowIndex)"
          >编辑1</a-button
        >
        <a-button type="text" @click="showConsole(record, rowIndex)"
          >详情2</a-button
        >
        <a-button type="text" @click="showConsole(record, rowIndex)"
          >详情3</a-button
        >
        <a-button type="text" @click="showConsole(record, rowIndex)"
          >详情4</a-button
        >
        <a-button type="text" @click="showConsole(record, rowIndex)"
          >详情5</a-button
        >
      </template>
    </query-page>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import { sleep } from '@/utils/tools';
  import {
    formComponentConfig,
    formRenderConfig,
  } from '@/common/views/baseComponent/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '@/common/views/baseComponent/tableComp/baseTableConfig';

  // 当前页面要渲染的查询条件
  const formRenderKeys = ['name', 'like', 'sex', 'age', 'birthday'];
  // 当前表格要渲染哪些值
  const tableRenderKeys = [
    'index',
    'name',
    'city',
    'salary',
    'address',
    'email',
    'age',
    'remove',
    'operate',
  ];

  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const selectedKeys = ref(['id-1']);

  const getData = async (queryInfo: object) => {
    renderData.value = [];
    isLoading.value = true;
    console.log('queryInfo', queryInfo);
    await sleep(2000);
    const data = reactive([
      {
        id: 'id-1',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com',
      },
      {
        id: 'id-2',
        name: 'Alisa Ross',
        salary: 25000,
        address: '35 Park Road, London',
        email: 'alisa.ross@example.com',
      },
      {
        id: 'id-3',
        name: 'Kevin Sandra',
        salary: 22000,
        address: '31 Park Road, London',
        email: 'kevin.sandra@example.com',
      },
      {
        id: 'id-4',
        name: 'Ed Hellen',
        salary: 17000,
        address: '42 Park Road, London',
        email: 'ed.hellen@example.com',
      },
      {
        id: 'id-5',
        name: 'William Smith',
        salary: 27000,
        address: '62 Park Road, London',
        email: 'william.smith@example.com',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;

    await sleep(2000);
    selectedKeys.value = [];
  };

  const showConsole = (rowData: object, index: number) => {
    console.log('rowData', rowData);
    console.log('index', index);
  };
  const selectionChange = (val: string[]) => {
    console.log('selectedKeys', val);
  };
</script>

<style lang="less" scoped>
  .page-con {
    height: 100%;
    background-color: #fff;
  }

  .table-header {
    height: 40px;
    line-height: 40px;
  }

  .table-side {
    width: 200px;
    height: 100%;
    margin-right: 20px;
    background-color: #00fff0;
  }
</style>
